<template>
  <div id="videolist" class="page-full-screen">
    <div class="title">
      <el-button @click="dotypes('新增')">新增</el-button>
    </div>
    <!--default-expand-all-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="label"
        label="分类名"
        width="600">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'up')">↑
          </el-button>
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'down')">↓
          </el-button>
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'bor')">新增同级
          </el-button>
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'child')">新增子级
          </el-button>
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'update')">编辑
          </el-button>
          <el-button
            size="mini"
            @click="handleType(scope.$index, scope.row, 'del')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="layer" v-show="seecontent">
      <div class="mask" @click="seecontent = false"></div>
      <div class="content">
        <div class="title">
          {{addtitle}}
        </div>
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94"></i></span>
        <div class="shuru">
          <span>分类名</span>
          <el-input v-model="input.label" placeholder="请输入分类名"></el-input>
        </div>

        <div class="shuru">
          <span>父级ID</span>
          <el-input v-model="input.parent_id" placeholder="请输入父级ID"></el-input>
        </div>

        <div class="shuru">
          <span class="">默认图标</span>
          <span class="imgupload" style="margin-left: 10px;">
            <img-upload :getimg='setIconShow' @getmsg="(date)=>{setIcon=date.fullName}" />
          </span>
        </div>

        <div class="shuru">
          <span>选中图标</span>
          <span class="imgupload">
            <img-upload :getimg='setIconActiveShow' @getmsg="(date)=>{setIconActive=date.fullName}" />
          </span>
        </div>


        <div class="main-box">
          <span>状态</span>
          <el-radio-group v-model="input.enabled">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="0">不可用</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags">确定</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="seecontent = false">取消</el-button></span>
        </div>
      </div>
    </div>
    <el-dialog
      title="新增分类"
      :visible.sync="setIdShow"
      width="60%">
      <div>
        父ID：{{!getmsg.parent_id ? 0 : getmsg.parent_id}}
      </div>
      <div class="mar-top">
        <el-input v-model="setIdAlias" placeholder="请输入分类名"></el-input>
      </div>

      <div class="mar-top">
        <div class="shuru">
          <span class="">默认图标</span>
          <span class="imgupload" style="margin-left: 10px;">
            <img-upload :getimg='setIconShow' @getmsg="(date)=>{setIcon=date.fullName}" />
          </span>
        </div>
      </div>

      <div class="mar-top">
        <div class="shuru">
          <span>选中图标</span>
          <span class="imgupload">
            <img-upload :getimg='setIconActiveShow' @getmsg="(date)=>{setIconActive=date.fullName}" />
          </span>
        </div>
      </div>

      <div class="mar-top">
        <el-radio-group v-model="setIdEnabled">
          <el-radio :label="1">可用</el-radio>
          <el-radio :label="0">不可用</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="setIdShow = false">取 消</el-button>
    <el-button type="primary" @click="setB">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/content'
import ImgUpload from '../public/imgUpload'
import config from '../../common/config'

export default {
  components: {
    ImgUpload,
    MsgList,
    editor: editor
  },
  name: 'questions',
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'label',
          label: '分类名'
        }
      ],
      btntype: ['修改', '删除'],
      delshow: false,
      seecontent: false,
      addtitle: '',
      input: {
        'parent_id': '',
        'icon': '',
        'icon_active': '',
        'label': '',
        'enabled': 1
      },
      getmsg: {},
      setIcon: '',
      setIconActive: '',
      setId: 0,
      setIdShow: false,
      setIdAlias: '',
      setIdEnabled: 1
    }
  },
  watch: {
    seecontent() {
      if (!this.seecontent) {
        this.input = { 'enabled': 1 }
      }
    },
    setIdShow() {
      if (!this.setIdShow) {
        this.setId = 0
        this.setIdAlias = ''
      }
    }
  },
  computed: {
    setIconShow() {
      return this.setIcon ? config.imgURI + this.setIcon : ''
    },
    setIconActiveShow() {
      return this.setIconActive ? config.imgURI + this.setIconActive : ''
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    setB() {
      let that = this
      this.$g.ajax({
        path: 'categories/add',
        method: 'post',
        data: {
          'parent_id': this.setId,
          'alias': this.setIdAlias,
          'icon': this.setIcon,
          'icon_active': this.setIconActive,
          'enabled': this.setIdEnabled
        },
        cbSuccess: function(data) {
          that.setIdShow = false
          that.search()
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    handleType(index, row, action) {
      this.getmsg = row
      if (action === 'del') {
        this.delhot()
      } else if (action === 'up' || action === 'down') {
        let obj = {
          type: action,
          id: row.id
        }
        this.move(obj)
      } else if (action === 'bor' || action === 'child') {
        this.setId = action === 'bor' ? (row.parent_id === null ? '' : row.parent_id) : row.id
        this.setIcon = ''
        this.setIconActive = ''
        this.setIdShow = true
      } else {
        this.dotypes('修改')
      }
    },
    search() {
      let that = this
      this.$g.ajax({
        path: 'categories/getList',
        method: 'get',
        cbSuccess: function(data) {
          that.tableData = data.memo
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    dotypes(type) {
      this.seecontent = true
      this.addtitle = type
      this.setIcon = ''
      this.setIconActive = ''
      if (type === '修改') {
        this.input = {
          'parent_id': this.getmsg.parent_id,
          'label': this.getmsg.label,
          icon: this.getmsg.icon,
          icon_active: this.getmsg.icon_active,
          'enabled': this.getmsg.enabled
        }
        this.setIcon = this.getmsg.icon
        this.setIconActive = this.getmsg.icon_active
      } else if (type === '删除') {
        this.seecontent = false
        this.delhot()
      }
    },
    addTags() {
      let that = this
      if (this.addtitle === '新增') {
        this.$g.ajax({
          path: 'categories/add',
          method: 'post',
          data: {
            'parent_id': this.input.parent_id,
            'alias': this.input.label,
            icon: this.input.setIcon,
            icon_active: this.input.setIconActive,
            'enabled': this.input.enabled,
          },
          cbSuccess: function(data) {
            that.seecontent = false
            that.input = {}
            that.search()
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else if (this.addtitle === '修改') {
        this.$g.ajax({
          path: 'categories/update',
          method: 'post',
          data: {
            'parent_id': this.input.parent_id,
            'alias': this.input.label,
            'enabled': this.input.enabled,
            icon: this.input.setIcon,
            icon_active: this.input.setIconActive,
            'id': this.getmsg.id
          },
          cbSuccess: function(data) {
            that.seecontent = false
            that.input = {}
            that.search()
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
    },
    move(data) {
      let that = this
      this.$g.ajax({
        path: 'categories/move',
        method: 'post',
        data: {
          'action': data.type,
          'id': data.id
        },
        cbSuccess: function(data) {
          that.seecontent = false
          that.input = {}
          that.search()
        },
        cbError: function(data) {
          let msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    delhot() {
      let that = this
      this.$confirm('确定删除分类吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$g.ajax({
          path: 'categories/delete',
          method: 'post',
          data: {
            'id': that.getmsg.id
          },
          cbSuccess: function(data) {
            that.search()
          },
          cbError: function(data) {
            let msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getid(vals) {
      this.getmsg = vals.val
      this.dotypes(vals.btn)
    },
    getIcon(date) { // 获取图片信息
      this.input.icon = date.fullName
      this.setIcon = config.imgURI + date.fullName
    },
    getActiveIcon(date) { // 获取图片信息
      this.input.icon_active = date.fullName
      this.setActiveIcon = config.imgURI + date.fullName
    },
  }
}
</script>

<style lang="scss" scoped>
.active {
  display: inline-block;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#videolist {
  .title {
    margin-bottom: 20px;
  }

  .main-box {
    margin-top: 20px;

    span {
      margin-right: 30px;
      font-size: 14px;
      font-weight: 700;
      color: #606266;
    }

    .el-input {
      width: 240px;
    }
  }

  .main-box {
    .el-radio__inner {
      background: red;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #00a4a0 !important;
    }
  }

  .layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;

    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    .content {
      position: relative;
      width: 700px;
      background: #fff;
      margin: 10% auto;
      z-index: 2;
      padding: 30px;

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .shuru {
        margin-bottom: 10px;

        span {
          font-size: 14px;
          color: #666;
        }

        .el-input {
          width: 90%;
          margin-left: 20px;
        }
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        position: relative;
        left: -4px;
      }

      .buttons {
        margin-top: 20px;
        text-align: center;

        button {
          margin: 0 20px;
        }
      }
    }
  }
}

.mar-top {
  margin-top: 14px;
}
</style>
<style scoped>
.el-button:focus, .el-button:hover {
  color: #00a4a0;
}

.el-button:active {
  border-color: #00a0a0;
}

.el-button {
  padding: 8px 14px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #00a4a0;
  border-color: #00a4a0;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

.imgupload {
  display: inline-block;
  margin-left: 10px;
  max-width: 80px;
}
</style>
